<template>
	<div>
		<el-form ref="form" :model="form" :rules="rules" v-loading="formLoading" label-width="80px">
			<el-tabs v-model="tabActiveName" :stretch="true">
				<el-tab-pane label="基本" name="base">
					<el-row>
						<el-col :span="18">
							<el-form-item label="商品名称" prop="goods_name">
								<el-input v-model="form.goods_name" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="商品单位" prop="unit">
								<el-input v-model="form.unit" placeholder="如个、件、包" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="副标题" prop="sub_title">
								<el-input v-model="form.sub_title" placeholder="" />
							</el-form-item>
						</el-col>
						<el-col :span="10">
							<el-form-item label="分类" prop="category_id">
								<el-cascader
									v-model="form.category_id"
									:options="shopCategorys"
									:props="{
										value: 'id',
										label: 'cat_name',
										children: 'children',
										emitPath: false,
										checkStrictly: false
									}"
									@change="categoryChange"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="属性" prop="attrs">
								<el-checkbox-group v-model="form.check_attrs">
									<el-checkbox :key="goodsAttr.value"
										v-for="goodsAttr in goodsAttrs"
										:label="goodsAttr.value"
									>
										{{ goodsAttr.name }}
									</el-checkbox>
								</el-checkbox-group>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="显示" prop="shows">
								<el-checkbox-group v-model="form.check_attrs">
									<el-checkbox :key="goodsShow.value"
										v-for="goodsShow in goodsShows"
										:label="goodsShow.value"
									>
										{{ goodsShow.name }}
									</el-checkbox>
								</el-checkbox-group>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="短标题" prop="short_title">
								<el-input
									v-model="form.short_title"
									placeholder="商品短标题 用于快递打印,以及小型热敏打印机打印"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="排序" prop="display_sort">
								<el-input-number
									v-model="form.display_sort"
									controls-position="right"
									:min="0"
									:max="9999"
									placeholder="大到小"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="虚拟销量" prop="virtual_sales">
								<el-input-number
									v-model="form.virtual_sales"
									controls-position="right"
									:min="0"
								/>
							</el-form-item>
						</el-col>

						<el-col :span="18">
							<el-form-item label="封面图" prop="cover">
								<sc-upload-multiple ref="cover" v-model="form.cover" title="选择封面图" />
							</el-form-item>
						</el-col>

						<el-col :span="6">
							<el-form-item label="商品编码" prop="spu">
								<el-input v-model="form.spu" placeholder="商品编码" />
							</el-form-item>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="图片视频" name="medias">
					<el-row>
						<el-col :span="24">
							<el-form-item label="产品图" prop="thumbs">
								<sc-upload-multiple ref="thumbs" v-model="form.thumbs" multiple title="选择产品图" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="产品视频" prop="video_url">
								<el-input v-model="form.video_url" placeholder="产品视频地址" />
							</el-form-item>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="商品价格库存" name="options">
					<goods-spec-form
						ref="goodsSpecForm"
						:spec_data="form.specs"
						:option_data="form.options"
						:baseUrl="baseUrl"
					/>
				</el-tab-pane>
				<el-tab-pane label="商品属性" name="attribute">
					<div>
						<a href="https://v1.uviewui.com/components/icon.html" target="_blank">更多图标名称可选</a>
					</div>
					<sc-form-table v-model="form.attributes" :addTemplate="addAttributesTemplate" drag-sort placeholder="暂无数据">
						<el-table-column prop="icon_name" label="属性图标名称">
							<template #default="scope">
								<el-input v-model="scope.row.icon_name" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="icon_text" label="属性文字">
							<template #default="scope">
								<el-input v-model="scope.row.icon_text" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
					</sc-form-table>
				</el-tab-pane>
				<el-tab-pane label="PC商品描述" name="content">
					<el-col :span="24">
						<sc-editor v-model="form.content" placeholder="请输入" :height="400" style="width: 100%;"></sc-editor>
					</el-col>
				</el-tab-pane>
				<el-tab-pane label="手机商品描述" name="mobile_content">
					<el-col :span="24">
						<goods-mobile-content :baseUrl="baseUrl" :contents="form.mobile_content" />
					</el-col>
				</el-tab-pane>
				<!--<el-tab-pane label="邮寄信息" name="logistics" />-->
			</el-tabs>
		</el-form>
	</div>
</template>

<script>
import {defineAsyncComponent} from "vue";
const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));
import goodsSpecForm from "./goodsSpecForm.vue";
import GoodsMobileContent from "./mobileContent.vue";

export default {
	name: "shop-goods-form-component",
	components: {
		GoodsMobileContent,
		goodsSpecForm,
		scEditor
	},
	props: {
		goodsId: { type: Number, default: 0 }, // 如果为0时为添加
		baseUrl: { type: String, default: "" }
	},
	emits: ["fail", "success"],
	data() {
		var validateGoodsName = (rule, value, callback) => {
			let errMsg = "商品名称不能为空";
			if (!value || value === "") {
				if (this.tabActiveName !== "base") {
					this.$message.error(errMsg);
				}
				return callback(new Error(errMsg));
			}

			callback();
		};
		var validateCategoryId = (rule, value, callback) => {
			let errMsg = "请选择分类";
			if (!value || value === "" || value < 1) {
				if (this.tabActiveName !== "base") {
					setTimeout(() => {
						this.$message.error(errMsg);
					}, 100);
				}
				return callback(new Error(errMsg));
			}
			callback();
		};
		var validateCover = (rule, value, callback) => {
			let errMsg = "请选择封面图";
			if (!value || value === "" || value < 1) {
				if (this.tabActiveName !== "base") {
					setTimeout(() => {
						this.$message.error(errMsg);
					}, 200);
				}
				return callback(new Error(errMsg));
			}
			callback();
		};
		return {
			form: {
				goods_name: "",
				sub_title: "",
				unit: "",
				category_id: 0,
				check_attrs: [],
				short_title: "",
				display_sort: 0,
				virtual_sales: 0,
				cover: "",
				thumbs: '',
				video_url: "",
				specs: [],
				options: [],
				spu: "",
				content: "",
				mobile_content: [],
				attributes: []
			},
			contentType: "pc",
			dataTypeValue: 5,
			goodsShows: [
				{ name: "销量", value: "is_show_sales" },
				{ name: "库存", value: "is_show_stock" }
			],
			goodsAttrs: [
				{ name: "推荐", value: "is_recommand" },
				{ name: "新品", value: "is_new" },
				{ name: "热销", value: "is_hot" }
			],
			shopCategorys: [],
			tabActiveName: "base",
			formLoading: false,
			rules: {
				goods_name: { validator: validateGoodsName, trigger: "change" },
				category_id: { validator: validateCategoryId, trigger: "change" },
				cover: { validator: validateCover, trigger: "change" }
			},
			addAttributesTemplate: {
				icon_name: "",
				icon_text: "",
			},
		};
	},
	computed: {},
	mounted() {
		this.getsSource();
		if (this.goodsId > 0) {
			this.getGoodsData();
		} else {
			this.initDefaultOption();
		}
		this.$refs.cover.setBaseUrl(this.baseUrl);
		this.$refs.thumbs.setBaseUrl(this.baseUrl);
	},
	methods: {
		// 初始化默认规格
		initDefaultOption() {
			const specsId = this.$TOOL.createUniqueString() + "_id";
			const leafId = this.$TOOL.createUniqueString() + "_0_id";
			this.form.specs = [
				{
					value: "默认",
					id: specsId,
					leaf: [
						{
							value: "默认",
							thumb: "",
							spec_id: specsId,
							id: leafId
						}
					]
				}
			];
		},
		getGoodsData() {
			const that = this;
			this.$API.shop.goods.info({ id: this.goodsId }).then((res) => {
				if (res.code === 0) {
					res.data.thumbs = res.data.thumbs.join(",");
					that.form = res.data;
				}
				else {
					this.$message.error('getGoodsData 获取数据失败,' + res.message);
				}
				that.formLoading = false;
			});
		},
		getsSource() {
			const that = this;
			this.$API.shop.category.list({ type_str: "shop" }).then((res) => {
				if (res.code === 0) {
					that.shopCategorys = that.$TOOL.deepTree(res.data, "parent_id");
				}
				else {
					this.$message.error('getsSource 获取数据失败,' + res.message);
				}
			});
		},
		categoryChange(value) {
			console.log(value);
		},
		onSubmit() {
			const _this = this;
			_this.$refs["form"].validate((valid) => {
				if (!valid) {
					_this.$emit("fail");
					return false;
				}
				let submitData = { ...this.form };
				submitData.thumbs = this.form.thumbs.split(",");
				console.log(submitData);
				const specsData = _this.$refs["goodsSpecForm"].getSpecData();
				delete submitData["options"];
				submitData["specs"] = specsData["specs"];
				submitData["spec_tables"] = specsData["tables"];
				console.log(submitData);
				if (_this.goodsId > 0) {
					_this.$API.shop.goods.update(submitData).then((res) => {
						if (res.code === 0) {
							this.$message.success("编辑成功");
							_this.$emit("success");
						}
						else {
							this.$message.error('getsSource 获取数据失败,' + res.message);
						}
					});
				} else {
					_this.service.$API.goods.add(submitData).then((res) => {
						if (res.code === 0) {
							this.$message.success("添加成功");
							_this.$emit("success");
						}
						else {
							this.$message.error('getsSource 获取数据失败,' + res.message);
						}
					});
				}
			});
		},
/*		addTableAttribute() {
			this.form.attributes.push({
				icon_name: "",
				icon_text: ""
			});
		},
		delTableAttribute(_index) {
			this.form.attributes.splice(_index, 1);
		}*/
	}
};
</script>

<style scoped></style>
